<template>
  <BaseMainSlot :show-btn-box="true">
    <template v-slot:btn-box>
      <ActionBar :page-no="24" :add-active="true" :del-active="delActive" :has-cancel="false" @add="showDialog" @del="del" />
    </template>
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="seach-box">
          <div class="select-box-content">
            <div class="select-box-content-name">产品名称：</div>
            <el-select v-model="querylist.productMaterialNo" placeholder="请选择" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">加工附属品名称：</div>
            <el-input v-model="querylist.materialName" placeholder="请输入加工附属品名称" />
          </div>
        </div>
      </SearchBox>
    </template>
    <template v-slot:table-box>
      <tdtable :page="page" :title="title" :prop-list="propList" :show-select-column="showSelectColumn" :show-index-column="showIndexColumn" :table-data="tableData" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange">
        <template v-slot:handler="{ row }">
          <div v-if="row.materialNo" class="pointer" @click="edit(row)"><i class="el-icon-edit"></i>修改</div>
        </template>
      </tdtable>
    </template>
    <template v-slot:dialog>
      <AddDialog v-if="prodData !== null" :prod-data="prodData" :show="show" :title-text="titleText" :form-data-copy="formData" :material-type-list="options" @closeDialog="closeDialog" @addEvent="addEvent" />
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from '@/components/ActionBar/index1.vue';
import BaseMainSlot from '@/components/BaseMainSlot/newBaseMainSlot.vue';
import tdtable from '@/components/table/index.vue';
import AddDialog from './components/add-pgay-dialog.vue';
import SearchBox from '@/components/SearchBox/index.vue';
import productionApi from '@/api/processing-management/basic-info-manage/processing-product-manage/index';
import processingAccessoryApi from '@/api/processing-management/basic-info-manage/processing-accessory-manage/index';
import materialApi from '@/api/processing-management/basic-info-manage/material-manage/index';
import { mymixin } from '@/utils/materialMixin';
export default {
  name: 'ProcessingAccessoryManage',
  components: { BaseMainSlot, tdtable, AddDialog, SearchBox, ActionBar },
  mixins: [mymixin],
  data() {
    return {
      formData: {},
      handle: '',
      delActive: false,
      querylist: {
        productMaterialNo: '',
        materialName: '',
        organizationNo: sessionStorage.organizationNo
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      title: '加工附属品列表',
      propList: [
        { prop: 'productMaterialName', label: '产品名称', minWidth: '80' },
        { prop: 'materialTypeName', label: '加工附属品类型', minWidth: '120' },
        { prop: 'materialName', label: '加工附属品名称', minWidth: '120' },
        { prop: 'materialspec', label: '规格', minWidth: '80' },
        { prop: 'model', label: '型号', minWidth: '100' },
        { prop: 'unitName', label: '主单位', minWidth: '100' },
        { prop: 'remarks', label: '备注', minWidth: '100' },
        { label: '操作', minWidth: '120', slotName: 'handler' }
      ],
      showIndexColumn: true,
      showSelectColumn: true,
      tableData: [],
      titleText: '添加附属品',
      show: false,
      handleSelectList: [],
      prodData: null
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.queryProdPageList();
    this.queryPageList();
  },
  methods: {
    queryProdPageList() {
      // 获取数据
      let param = {
        page: 1,
        size: 1000,
        entity: {
          organizationNo: sessionStorage.organizationNo
        }
      };
      productionApi.queryPageList(param).then(res => {
        if (res.code === 1) {
          let data = res.data;
          this.prodData = data.content.map(i => {
            const newData = {
              ...i.material,
              ...i
            };
            delete newData.material;
            return newData;
          });
        }
      });
    },
    search() {
      this.queryPageList();
    },
    edit(row) {
      console.log(row);
      this.show = true;
      this.handle = 'edit';
      this.formData = { ...row };
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.queryPageList();
    },

    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.queryPageList();
    },
    // 选中table行点击事件
    handleSelectionChange(val) {
      console.log(val);
      this.handleSelectList = [];
      val.forEach(e => {
        this.handleSelectList.push(e.materialNo);
      });
      if (this.handleSelectList.length > 0) {
        this.delActive = true;
      } else {
        this.delActive = false;
      }
    },

    queryPageList() {
      // 获取数据
      let param = {
        page: this.page.currentPage,
        size: this.page.pageSize,
        entity: this.querylist
      };
      processingAccessoryApi.queryPageList(param).then(res => {
        if (res.code === 1) {
          let data = res.data;
          // let result = [];
          this.page.total = data.totalElements;
          console.log(data.content);
          // data.content.forEach(e => {
          //   e.material.productMaterialName = e.productMaterial.materialName;
          //   let material = e.material;
          //   material.productMaterialNo = e.productMaterialNo;
          //   result.push(material);
          // });
          // console.log(result);
          // this.tableData = result;
        }
      });
    },
    // 添加物料
    addEvent(formData) {
      // let params = formData;
      // processingAccessoryApi.add(params).then(res => {
      //   console.log(res);
      //   if (res.code === 1) {
      //     this.$message.success(res.msg);
      //     this.queryPageList();
      //   }
      // });
      let params = formData;
      if (this.handle === 'add') {
        processingAccessoryApi.add(params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.queryPageList();
          }
        });
      }
      if (this.handle === 'edit') {
        materialApi.edit(params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.queryPageList();
          }
        });
      }
    },
    // 删除供应商
    del() {
      let params = {
        noList: this.handleSelectList
      };
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'myClass'
      })
        .then(() => {
          processingAccessoryApi.del(params).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.queryPageList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 显示添加弹出框
    showDialog() {
      this.show = true;
      this.handle = 'add';
    },
    closeDialog() {
      this.show = false;
    }
  }
};
</script>

<style scoped lang="scss">
@import '~@/styles/variables.scss';
.botton {
  background-color: #0091b7;
}
</style>
